<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
    <script src="../Ajs/vue.min.js"></script>
</head>
<body>

<div id="box">
    <input type="text" v-model.lazy="username"><span>{{hint}}</span>
</div>

<script>
    /*
    【验证用户名是否可用】
    需求：输入框输入用户名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以使用
    * */

    var vm = new Vue({
        el:"#box",
        data:{
            data:["admin","jankin"],
            username:"",
            hint:""
        },
        methods:{
            checkName(username){
                var $this = this;
                setTimeout(function(){
                    if($this.data.indexOf(username) != -1){
                        //说明有值
                        $this.hint = "用户名已经存在";
                    }else{
                        $this.hint = "可以使用这个用户名";
                    }
                },1000);
            }
        },
        watch:{
            username:function(val){
                this.checkName(val);

                this.hint = "正在加载中";
            }
        }
    });
</script>

</body>
</html>
